<template>
    <div>
        <div class="paging pull-right">
            <ul class="paging-layout">
                <li><a href="###" class="page-first" @click.prevent="currPage=1">首页</a></li>
                <li><a href="###" class="page-prv" @click.prevent="currPage==1?null:(currPage--)">上一页</a></li>
                <template  v-for="(item,index) in lenglist">
                    <li v-if="showtype=='btn'" :class="{'active':item==currPage}" :key="index">
                        <a href="###" @click.prevent="currPage=item">{{item}}</a>
                    </li>
                </template>
                <li v-if="showtype=='input'">
                    <div class="page-input-layout">
                        <input type="number" min="1" :max="leng" v-model="currPage">
                        <span>/ {{leng}}</span>
                    </div>
                </li>
                <li><a href="###" class="page-next" @click.prevent="currPage==leng?null:(currPage++)">下一页</a></li>
                <li><a href="###" class="page-last" @click.prevent="currPage=leng">末页</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Paging',
        data(){
            return {
                
            }
        },
        props:{
            'showtype':{
                type:String,
                default:'btn'
            },
            'value':{
                type:Number,
                default:0
            },
            'total':{
                type:Number,
                default:0
            },
            'ps':{
                default:10
            }
        },
        data:function(){
            return {
                currPage:0,
                leng:1,
                lenglist:[]
            }
        },
        watch:{
            value:function(v,ov){
                this.currPage = v;
            },
            currPage:function(v,ov){
                var self = this;
                self.setLengList();
                this.$emit('input',v);

            },
            total:function(v,ov){
                var self = this; 
                self.leng = Math.ceil(v/parseInt(self.ps));
                self.setLengList();
            },
            ps(v,ov){
                var self = this; 
                self.leng = Math.ceil(self.total/parseInt(v));
                self.setLengList();
            }
        },
        methods:{
            setLengList(){
                var self = this;
                self.lenglist = [];
                var v = self.currPage;
                var s = 0;
                var e = 0;
                if(v<=5){
                    s = 1;
                    e = self.leng>9?9:self.leng;
                } else {
                    if(self.leng<=9){
                        s = 1;
                        e = self.leng;
                    } else {
                        s = v - 4;
                        e = (v+4)>self.leng?self.leng:(v+4);
                    }
                }

                for(var i=s;i<=e;i++){
                    self.lenglist.push(i);
                }
            }
        },
        mounted: function () {
            var self = this;
            // self.leng = Math.ceil(self.total/self.ps);
            self.currPage = self.value;
        }
    }
</script>

<style scoped>

</style>